<template>
<view style="background-color: #fff;padding: 0upx 10upx;">
		<view class="" style="display: flex;margin:0upx 70upx 30upx;color: #ccc;justify-content: space-around;padding-top: 20upx;">
			<view :class="{active:isActive}" @click="Aclick">
				全部
			</view>
			<view :class="{active:isActive1}" @click="Aclick1" style="margin: 0upx 40upx 0upx 60upx;">
				我的收入
			</view>
			<view :class="{active:isActive2}" @click="Aclick2" style="margin: 0upx 60upx 0upx 40upx;">
				我的支出
			</view>
			<view :class="{active:isActive3}" @click="Aclick3">
				总计
			</view>
		</view>
		<!-- 全部 -->
		<view v-show="ischanpin" class="">
			<view style="display: flex;justify-content: space-between;box-shadow: 1upx 1upx 10upx #DDDDDD;padding: 30upx;border-radius: 20upx;" v-for="(item,index) in res" :key="index">
				<view class="" style="display: flex;flex-direction: column;color: #858585;">
					<view class="" style="color: #000000;">订单号: <text>{{item.order_number}}</text></view>
					<view class=""><text>会员:</text><text style="margin: 0upx 10upx 30upx;">{{item.real_name}}</text><text>结算金额:</text><text style="margin-left: 10upx;">{{item.commision}}</text></view>
					<view class="">收益类型:
						<text style="margin-left: 10upx;" v-if="item.type == 1">团队奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 2">提现</text>
						<text style="margin-left: 10upx;" v-if="item.type == 3">区域奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 4">撤销</text>
						<text style="margin-left: 10upx;" v-if="item.type == 5">消费</text>
					</view>
				</view>
				<view class="" style="font-size: 42upx;margin-top: 40upx;">
					<text v-if="item.type == 2 || item.type == 4 || item.type == 5">-</text><text v-else>+</text>{{item.price}}
				</view>
			</view>
			<view class="" style="margin-top: 60upx; border-top: 1upx solid #DDDDDD; height: 100upx;background-color: #fff;text-align: center;line-height: 100upx;color:#858585 ;">
				--- 已显示全部 ---
			</view>
		</view>
		<!-- 我的收入 -->
		<view v-show="iswenhua">
			<view style="display: flex;justify-content: space-between;box-shadow: 1upx 1upx 10upx #DDDDDD;padding: 30upx;border-radius: 20upx;" v-for="(item,index) in res" :key="index">
				<view class="" style="display: flex;flex-direction: column;color: #858585;">
					<view class="" style="color: #000000;">订单号: <text>{{item.order_number}}</text></view>
					<view class=""><text>会员:</text><text style="margin: 0upx 10upx 30upx;">{{item.real_name}}</text><text>结算金额:</text><text style="margin-left: 10upx;">{{item.commision}}</text></view>
					<view class="">收益类型:
						<text style="margin-left: 10upx;" v-if="item.type == 1">团队奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 2">提现</text>
						<text style="margin-left: 10upx;" v-if="item.type == 3">区域奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 4">撤销</text>
						<text style="margin-left: 10upx;" v-if="item.type == 5">消费</text>
					</view>
				</view>
				<view class="" style="font-size: 42upx;margin-top: 40upx;">
					<text v-if="item.type == 2 || item.type == 4 || item.type == 5">-</text><text v-else>+</text>{{item.price}}
				</view>
			</view>
			<view class="" style="margin-top: 60upx; border-top: 1upx solid #DDDDDD; height: 100upx;background-color: #fff;text-align: center;line-height: 100upx;color:#858585 ;">
				--- 已显示全部 ---
			</view>
		</view>
		<!-- 我的支出 -->
		<view v-show="ischuangyi">
			<view style="display: flex;justify-content: space-between;box-shadow: 1upx 1upx 10upx #DDDDDD;padding: 30upx;border-radius: 20upx;" v-for="(item,index) in res" :key="index">
				<view class="" style="display: flex;flex-direction: column;color: #858585;">
					<view class="" style="color: #000000;">订单号: <text>{{item.order_number}}</text></view>
					<view class=""><text>会员:</text><text style="margin: 0upx 10upx 30upx;">{{item.real_name}}</text><text>结算金额:</text><text style="margin-left: 10upx;">{{item.commision}}</text></view>
					<view class="">收益类型:
						<text style="margin-left: 10upx;" v-if="item.type == 1">团队奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 2">提现</text>
						<text style="margin-left: 10upx;" v-if="item.type == 3">区域奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 4">撤销</text>
						<text style="margin-left: 10upx;" v-if="item.type == 5">消费</text>
					</view>
				</view>
				<view class="" style="font-size: 42upx;margin-top: 40upx;">
					<text v-if="item.type == 2 || item.type == 4 || item.type == 5">-</text><text v-else>+</text>{{item.price}}
				</view>
			</view>
			<view class="" style="margin-top: 60upx; border-top: 1upx solid #DDDDDD; height: 100upx;background-color: #fff;text-align: center;line-height: 100upx;color:#858585 ;">
				--- 已显示全部 ---
			</view>
		</view>
		<!-- 总计 -->
		<view v-show="ishuodong">
			<view style="display: flex;justify-content: space-between;box-shadow: 1upx 1upx 10upx #DDDDDD;padding: 30upx;border-radius: 20upx;" v-for="(item,index) in res" :key="index">
				<view class="" style="display: flex;flex-direction: column;color: #858585;">
					<view class="" style="color: #000000;">订单号: <text>{{item.order_number}}</text></view>
					<view class=""><text>会员:</text><text style="margin: 0upx 10upx 30upx;">{{item.real_name}}</text><text>结算金额:</text><text style="margin-left: 10upx;">{{item.commision}}</text></view>
					<view class="">收益类型: 
						<text style="margin-left: 10upx;" v-if="item.type == 1">团队奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 2">提现</text>
						<text style="margin-left: 10upx;" v-if="item.type == 3">区域奖</text>
						<text style="margin-left: 10upx;" v-if="item.type == 4">撤销</text>
						<text style="margin-left: 10upx;" v-if="item.type == 5">消费</text>
					</view>
				</view>
				<view class="" style="font-size: 42upx;margin-top: 40upx;">
					<text v-if="item.type == 2 || item.type == 4 || item.type == 5">-</text><text v-else>+</text>{{item.price}}
				</view>
			</view>
			<view class="" style="margin-top: 60upx; border-top: 1upx solid #DDDDDD; height: 100upx;background-color: #fff;text-align: center;line-height: 100upx;color:#858585 ;">
				--- 已显示全部 ---
			</view>
		</view>
		<uni-load-more v-if="load == 1" :loadingType="loadingType" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from '../../../components/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				iswenhua: false,
				ischuangyi: false,
				ischanpin : true,
				ishuodong : false,
				isActive : true,
				isActive1 : false,
				isActive2 : false,
				isActive3 : false,
				user_id: '',
				search: 1,
				res:[],
				
				loadingText: '加载中...',
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				load: 0,
				page: 1,
				timer:{},
			}
		},
		onLoad:function(){
			// uni.showLoading()
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../index/index'
					});
				}
			});
		},
		// 上拉加载
		onReachBottom(){
			if (this.timer != null) {
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(()=> {
				this.getmorenews()
			}, 1000);
		},
		methods: {
			setAjax(){
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/CommisionLog/index?p=' + this.page,
					method: 'POST',
					data:{
						user_id: this.user_id,
						search: this.search
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						this.res = res.data.data.data.list
						console.log(this.res)
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getmorenews() {
				this.page++;//每触底一次 page +1
				if (this.loadingType !== 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/CommisionLog/index?p=' + this.page,
					method: 'POST',
					data:{
						user_id: this.user_id,
						search: this.search
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						if (res.data.data.data.list == '') {//没有数据
							this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return;
						}
						this.res = this.res.concat(res.data.data.data.list);//将数据拼接在一起
						this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
					},
					fail: () => {},
					complete: () => {}
				});
			},
			Aclick : function(){
				this.ischanpin = true
				this.iswenhua = false
				this.ischuangyi = false
				this.ishuodong = false
				this.isActive = true
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = false
				this.search = 1
				this.setAjax()
			},
			Aclick1 : function(){
				this.ischanpin = false
				this.iswenhua = true
				this.ischuangyi = false
				this.ishuodong = false
				this.isActive = false
				this.isActive1 = true
				this.isActive2 = false
				this.isActive3 = false
				this.search = 2
				this.setAjax()
			},
			Aclick2 : function(){
				this.ischanpin = false
				this.iswenhua = false
				this.ischuangyi = true
				this.ishuodong = false
				this.isActive = false
				this.isActive1 = false
				this.isActive2 = true
				this.isActive3 = false
				this.search = 3
				this.setAjax()
			},
			Aclick3 : function(){
				this.ischanpin = false
				this.iswenhua = false
				this.ischuangyi = false
				this.ishuodong = true
				this.isActive = false
				this.isActive1 = false
				this.isActive2 = false
				this.isActive3 = true
				this.search = 4
				this.setAjax()
			},
			bianjiclick : function(){
				uni.navigateTo({
				url:'/pages/user/shequ/wenzhang/wenzhang'	
				})
			}
		}
	}
</script>

<style>
 .active {
	 border-bottom: 5upx solid #000;
	 color: #000;
	 }
	 page {
		 background-color: #F7F7F7;
	 }
</style>
